<template>
  <div ref="player" id="player"></div>
</template>

<script setup>
import DPlayer from "dplayer"
import {getCurrentInstance, nextTick, ref, defineEmits, onMounted} from "vue";
import Hls from "hls.js";
const {proxy} = getCurrentInstance();

const props = defineProps({
  url:{
    type:String
  }
})

const videoInfo = ref({
  video:null
})

const player = ref()

const initPlayer = ()=>{
  const dp = new DPlayer({
    element:player.value,
    theme:"#b7daff",
    screenshot:true,
    video:{
      url:`/api/${props.url}`,
      type:"customHls",
      customType:{
        customHls:function (video,player){
          const hls = new Hls();
          hls.loadSource(video.src)
          hls.attachMedia(video);
        }
      }
    }
  });
}

onMounted(()=>{
  initPlayer();
})
</script>

<style>
#player{
  width:100%;
  :deep .dplayer-video-wrap{
    text-align: center;
    .dplayer-video{
      margin: 0px auto;
      max-height: calc(100vh - 41px);
    }
  }
}
</style>